/*****************************************************
    Created on : Dec 10, 2014, 3:20:34 PM
    Author     : Gvtechcom
    Doc        : Stylesheet vtvnow
******************************************************/

@font-face{
    src: url("../fonts/UVFFuturaLT.ttf");
    font-family: 'UVFFututaLT';
}
@font-face{
    src: url("../fonts/UTM_SWISS_CONDENSED_BOLD.TTF");
    font-family: 'UTMSwissCondBold';
}
@font-face{
    src: url("../fonts/UTM_SWISS_CONDENSED.TTF");
    font-family: 'UTMSwissCond';
}

$base_font:'UVFFututaLT';
$font_swiss:'UTMSwissCond';
$font_swiss_bold:'UTMSwissCondBold';

@import "reset";
@import "font-awesome";
@import "vars";
@import "animate";
@import "input";
@import "toast";
@import "dialog";
//@import url("toast.css");
html{
    height: 100%;
}

body{
    /*    min-width: 1024px;*/
    height: 100%;
    @include bg_image('bg.png');
    background-attachment: fixed;
    background-position: right center;
    font-size: 18px;
    font-family: $base_font;
    overflow: hidden;
}
#sidebar{
    width: 240px;
    @include image('bg-sidebar.png');
    background-repeat: repeat;
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 99;
    .Mute{
        float: none;
        position: absolute;
        top: 98px;
        left: 17px;
    }
    #sidebar_button{
        display: none;
    }
    .inner{
        width: 100%;
        height: 100%;
        position: relative;
        #logo{
            display: block;
            text-align: center;
            padding-top: 39px;
            /*            padding-bottom: 50px;*/
        }
        .scroller{
            position: absolute;
            top: 130px;
            bottom: 133px;
            left: 0px;
            right: 0px;
            overflow: hidden;
            text-transform: uppercase;
            .scroll_inner{
                font-family: $font_swiss;
                position: relative;
            }
        }
        .menu{
            li{
                position: relative;
                a{
                    display: block;
                    font-size: 18px;
                    color: #3f3f3f;
                    //margin: 0 auto;
                    margin-left: 20px;
                    width: 179px;
                    height: 45px;
                    line-height: 45px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    border-bottom: 1px solid #d1d1d1;
                }
                a:hover{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: inherit;
                    span{
                        //@extend .marquee;
                        display: inline-block;
                    }
                }
            }
            /* hover sidebar */
            li.li-hover{
                position: absolute !important;
                left: 0;
                width: 5px;
                height: 45px;
                background-color: #ec1f07;
                border: 0;
            }
            li:last-of-type{
                a{
                    border-bottom: 0;
                }
            }
        }

        .footer{
            position: absolute;
            bottom: 0px;
            height: 105px;
            left: 0px;
            right: 0px;
            padding:0px 15px;
            font-family: $base-font;
            color: rgba(107,65,20,.7);
            font-size: 16px;
            font-weight: 600;
            .apps{

                a{
                    width: 50px;
                    height: 50px;
                    display: block;
                    float: left;
                    margin-left: 30px;
                    background-size: 50%!important;
                    background-position: center!important;
                    background-color: #ec2008!important;
                    @include transition(.4s);
                    position: relative;
                }
                .ios{
                    @include bg_image('apple.png');
                    margin-left:0px;
                }
                .android{
                    @include bg_image('android.png');
                }
                .wp{
                    @include bg_image('wp.png');
                }
                a:hover, a.show{
                    background-size:60%!important;
                    background-color:#c51501!important;
                    z-index: 11;
                }

                .dialog-qr{
                    display: none;
                    width: 100%;
                    height: 100%;
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(0,0,0,.4);
                    z-index: 10;
                    .dialog-qr-box{
                        position: absolute;
                        bottom: 105px;
                        left: 15px;
                        height: 270px;
                        width: 225px;
                        padding: 3px;
                        background-color: rgba(255,255,255,.4);
                        box-sizing: border-box;
                        .dialog-qr-inside{
                            background: #fff;
                            width: 100%;
                            height: 100%;
                            img{
                                width: 219px;
                                height: 219px;
                                display: none;
                            }
                            p{
                                text-align: center;
                                font-family: $font-swiss;
                                font-size: 18px;
                                color: #000;
                                font-weight: normal;
                                padding: 0 16px;
                                position: absolute;
                                bottom: 9px;
                                left: 0;
                                right: 0;
                            }
                        }
                    }
                    .dialog-qr-outside{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .apps:after{
                @include clearfix();
            }
            .infoabout{
                margin-top: 10px;
                font-size: 16px;
                text-align: center;
                p{
                    font-size: 12px;
                    a{
                        color: #222;
                    }
                }
                img{
                    vertical-align: bottom;
                }
            }
        }
    }
}

#content{
    position:absolute;
    left: 240px;
    top:0px;
    right:0px;
    bottom:0px;
    overflow: auto;
    .inner{
        position:relative;
        width:100%;
        height:100%;
        padding:36px 36px;
        ul{
            li{
                .item{
                    float: left;
                    width: 33.3%;
                    height: 333px;
                    padding:11px;
                    position:relative;
                    .btn{
                        width: 56px;
                        height: 62px;
                        margin: 0px;
                        top: 23px;
                        right: 23px;
                    }
                    a:hover .image{
                        -webkit-transform: scale(1.2);
                        -moz-transform: scale(1.2);
                        -o-transform: scale(1.2);
                        -ms-transform: scale(1.2);
                        transform: scale(1.2);
                    }
                    a:hover .schedule{
                        //@extend .bounce;
                        //@include animated_delay(.5s,0s);
                    }
                    a{
                        background: #fff;
                        display:block;
                        width: 100%;
                        height: 100%;
                        padding: 5px;
                        position:relative;
                        .border{
                            overflow:hidden;
                            width: 100%;
                            height: 100%;
                        }
                        .image{
                            width: 100%;
                            height: 100%;
                            background-size:100% 100%!important;
                            -webkit-transition: all 0.4s ease-in-out;
                            -moz-transition: all 0.4s ease-in-out;
                            -o-transition: all 0.4s ease-in-out;
                            -ms-transition: all 0.4s ease-in-out;
                            transition: all 0.4s ease-in-out;
                        }

                    }
                    a:before{
                        margin: auto;
                        height: 22px;
                        display: block;
                        content: "";
                        @include bg_image('shadow.png');
                        position: absolute;
                        bottom:-11px;
                        left:0px;
                        right:0px;
                        z-index:-1;
                    }
                }

            }
            li:after{
                @include clearfix();
            }
        }
    }



}

.info{
    position: absolute;
    bottom: 5px;
    left: 6px;
    right: 5px;
    height: 50px;
    background: rgba(0,0,0,.5);
    color:#fff;

    .logo{
        width: 66px;
        height: 22px;
        background-size: 100% 100% !important;
        float: left;
        margin-top: 14px;
        margin-left: 10px;
    }
    .schedule{
        width: 50%;
        height: 100%;
        float: right;
        font-size: 14px;
        text-align: right;
        padding: 0px 10px;
        position:relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height:50px;
        .icon-clock{
            display: inline-block;
            @include image('icon-clock.png');
            background-position: 1px 0px;
            width: 21px;
            height: 20px;
            margin-right: 7px;
            margin-bottom: -4px;
        }
    }

    .playing{
        color: #ffc225;
        text-transform: uppercase;
    }
}
.info:before{
    content: "";
    height: 33px;
    width: 1px;
    background: #fff;
    display: inline-block;
    position: absolute;
    left: 0px;
    right: 0px;
    margin: auto;
    top: 9px;
}
.info:after{
    @include clearfix();
}
.Dialog{
    z-index:99999;
    display:none;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    .Layout{
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background: rgba(0,0,0,.6);
    }
    .Inner{
        .Poster{
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
            max-width: 90%;
            width: 828px;
            height: 467px;
            background: #fff;
            padding:5px;
            .image{
                width: 100%;
                height: 100%;
            }
        }
    }
}

@import "account";
@import "tvshow";
@import "media";

::-webkit-input-placeholder {
    font-family: $base-font;
}

:-moz-placeholder { /* Firefox 18- */
    font-family: $base-font;
}

::-moz-placeholder {  /* Firefox 19+ */
    font-family: $base-font;
}

:-ms-input-placeholder {  
    font-family: $base-font;
}

.Result_Warning{
    line-height: 22px;
    font-size: 17px;
}

.ZoomIn_3{
    @extend .zoomIn;
    @include animated_delay(.3s,0s);
}
.ZoomOut_4{
    @extend .zoomOut;
    @include animated_delay(.4s,0s);
}

@-moz-document url-prefix(){
    #sidebar {
        .inner {
            .footer {
                .infoabout {
                    margin-top: 10px;
                    font-size: 14px;
                    text-align: center;
                }
            }
        }
    }
}